<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>for标签使用详解</title>
</head>
<body>
    <h4>遍历普通list</h4>
    <h5>正向遍历</h5>
    <ul>
        {% for hero in heros %}
            <li>{{ hero }}</li>
        {% endfor %}
    </ul>
    <h5>反向遍历</h5>
    <ul>
        {% for hero in heros reversed %}
            <li>{{ hero }}</li>
        {% endfor %}
    </ul>
    <hr>
    <h4>遍历字典 dict</h4>
    <h5>遍历字典的时候，需要使用items、keys和values等方法</h5>
    <h6>keys</h6>
    <ul>
        {% for key in persons.keys %}
            <li>{{ key }}</li>
        {% endfor %}
    </ul>
    <h6>values</h6>
    <ul>
        {% for val in persons.values %}
            <li>{{ val }}</li>
        {% endfor %}
    </ul>
    <h6>items</h6>
    <ul>
        {% for key,val in persons.items %}
            <li>{{ key }}: {{ val }}</li>
        {% endfor %}
    </ul>
    <hr>
    <h4>循环提供变量</h4>
    <table border="1">
        <thead>
            <tr>
                <th>下标</th>
                <th>书名</th>
                <th>作者</th>
                <th>价格</th>
            </tr>
        </thead>
        <tbody>
            {% for book in books %}
{#  forloop.first：是否是第一次遍历。#}
{#  forloop.last：是否是最后一次遍历。#}
                {% if forloop.first %}
                    <tr style="background-color: pink">
                {% elif forloop.last %}
                    <tr style="background-color: aliceblue">
                {% else %}
                    <tr>
                {% endif %} 
{#  forloop.counter：当前循环的下标。以1作为起始值           #}
{#  <td>{{ forloop.counter }}</td>#}

{#  forloop.counter0：当前循环的下标。以0作为起始值#}
{#  <td>{{ forloop.counter0 }}</td>#}

{#  forloop.revcounter：当前循环的反向下标值。比如列表有5个元素，那么第一次遍历这个属性是等于5，第二次是4，以此类推。并且是以1作为最后一个元素的下标#}
{#  <td>{{ forloop.revcounter }}</td>#}

{#  forloop.revcounter0：类似于forloop.revcounter。不同的是最后一个元素的下标是从0开始#}
{#  <td>{{ forloop.revcounter0 }}</td>#}
                    <td>{{ forloop.counter }}</td>
                    <td>{{ book.name }}</td>
                    <td>{{ book.author }}</td>
                    <td>{{ book.price }}</td>
                </tr>
            {% endfor %}
        </tbody>
    </table>
    <h4>for...in...empty</h4>
    <h5>这个标签使用跟for...in...是一样的，只不过是在遍历的对象如果没有元素的情况下，会执行empty中的内容</h5>
    <ul>
        {% for comment in comments %}
            <li>{{ comment }}</li>
        {% empty %}
            <li>暂无评论</li>
        {% endfor %}
    </ul>
</body>
</html>